<template>
  <div class="confirm-box" :id="confirmId">
    <div class="mark" @click="closeConfirm"></div>
    <div class="content-box">
      <div class="content">{{ text }}</div>
      <div class="button-box">
        <div class="cnacal" v-if="gethiddenCancal" @click="handleCancal">
          {{ getcancalText }}
        </div>
        <div class="line" v-if="gethiddenCancal"></div>
        <div class="sure" @click="handleSubmit">{{ getsubmitText }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import i18n from '@/lang'
const $t = i18n.global.t
export default {
  name:'mobileMessage',
  props:{
    data:{
      type:Object
    },
    isClickModeClose:{
      type:Boolean,
      default:false
    },
    cancal:Function,
    submit:Function
  },
  data() {
    return {
      confirmId:'',
      text:"",
      hiddenCancal:false,
      submitText:$t('message.buttons.submit'),
      cancalText:$t('message.buttons.cancal'),
      cancal:null,
      submit:null
    };
  },
  created() {

  },
  mounted() {

  },
  methods: {
    init(){
      this.text = this.data.text
      this.hiddenCancal = this.data.hiddenCancal
      this.submitText = this.data.submitText
      this.cancalText = this.data.cancalText
      this.cancal = this.data.cancal
      this.submit = this.data.submit
      let uuid = this.getUUId(),uuidNew = []
      uuid.split('').forEach((item) => {
        if (item != '-') {
          uuidNew.push(item)
        }
      })
      this.confirmId = `message-box-${uuidNew.join('')}`
    },
    getUUId(){
      return URL.createObjectURL(new Blob()).substr(-36)
    },
    handleCancal() {
      this.cancal && this.cancal(this.removeDom())
    },
    handleSubmit() {
      this.removeDom()
      this.submit && this.submit()
    },
    closeConfirm() {
      if (this.isClickModeClose) {
        this.removeDom()
      }
    },
    removeDom() {
      setTimeout(() => {
        document.body.removeChild(document.getElementById(this.confirmId))
      }, 0)
    }
  },
  computed:{
    gethiddenCanca(){
      return !this.iddenCancal
    },
    getsubmitText(){
      return this.submitText || $t('message.buttons.submit')
    },
    getcancalText(){
      return this.cancalText || $t('message.buttons.cancal')
    }
  }
};
</script>

<style lang="scss" scoped>
.confirm-box {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100vh;
  width: 100vw;
  z-index: 99;
  .mark {
    background: rgba(54, 59, 76, 0.5);
    height: 100%;
    width: 100%;
  }
  .content-box {
    border-radius: 0.75rem;
    background-color: #fff;
    min-height: 8.625rem;
    position: absolute;
    width: calc(100vw - 4.6875rem);
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    .content {
      padding: 0.75rem;
      min-height: 5.5rem;
      font-size: 1rem;
      color: #363b4c;
      display: flex;
      align-items: center;
      justify-content: center;
      @include SourceHanSansCN-Regular;
    }
    .button-box {
      display: flex;
      height: 3.4375rem;
      border-top: 0.0625rem solid #eeeff0;
      .cnacal {
        width: 100%;
        text-align: center;
        line-height: 3.4375rem;
        color: #363b4c;
      }
      .line {
        width: 0.0625rem;
        background: #eeeff0;
      }
      .sure {
        width: 100%;
        text-align: center;
        line-height: 3.4375rem;
        color: #1e6fff;
      }
    }
  }
}
</style>